<template>
  <div>
      <h3>案例：全选、小选、反选</h3>
      <input type="checkbox" v-model="chkAll">全选
      <button @click="reverse">反选</button>
      <hr>
      <div>
          <div v-for="(item,index) in list" :key="index">

              <!-- checkbox的v-model如果绑定的是数组，那么拿到的是value -->
              <!-- 如果绑定的是基本类型，那么拿到的是选中状态 -->
              <!-- item.isCheck就是基本类型，拿到的就是选中状态，我们要拿的也是它的选中状态 -->
              <input type="checkbox" v-model="item.isCheck"> {{ item.name }}
          </div>
      </div>
  </div>
</template>

<script>
export default {

    data() {
        return {
            list: [
                { name: '可爱多', isCheck: true },
                { name: '可乐', isCheck: false },
                { name: '橙汁', isCheck: true },
                { name: '椰汁', isCheck: false },
            ],
        };
    },
    methods: {
        reverse () {
            // 反选就是让原本true变false，false变true
            this.list.forEach( v => v.isCheck = !v.isCheck)
        }
    },

    computed: {

        chkAll: {

            // 对计算属性取值
            get () {

                // 要依赖下面的小选来决定
                // 要遍历数组里面的isCheck属性，但凡有一个是false,就直接返回false
                // 全部是true，才返回true
                for (let i = 0; i < this.list.length; i++) {

                    // 循环的时候我在找false，但凡有一个是false，就直接return了
                    if (!this.list[i].isCheck) {
                        return false 
                    }
                }
                // 能来到循环外面，就证明全部都是true
                // 因为但凡有一个是false，早就return根本不会执行到这
                return true 
            },

            // 对计算属性赋值
            set (val) {

                // 只要全选的值是true，就让下面的小选都是true
                // 只要全选的值是false,就让下面的小选都是false
                // 所以换句话说就是把val这个值，遍历赋值给里面的每个小选即可
                this.list.forEach( v => v.isCheck = val )
            }
        }
    }
}
</script>

<style>

</style>